<template>
  <div>
    <div class="location">
      <icon id="location"></icon>
      上海
    </div>
    <app-filter :items="filterItems" @action="filter"></app-filter>
  </div>
</template>

<script>
import AppFilter from '@/components/Filter'

export default {
  data () {
    return {
      filterItems: [
        {
          menuList: [
            { name: '全部区域', title: '全部区域' },
            { name: '杨浦区' },
            { name: '浦东新区' },
            { name: '普陀区' },
            { name: '徐汇区' },
            { name: '宝山区' },
            { name: '松江区' }
          ]
        },
        {
          defaultMenuIndex: 1,
          menuList: [
            { name: '距离优先' },
            { name: '评价优先' },
            { name: '人气优先' }
          ]
        }
      ]
    }
  },
  components: {
    AppFilter
  },
  methods: {
    filter (data) {
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.location {
  padding: 10px;
  color: #C9B267;
  background: $bg;

  > .icon {
    font-size: 1.25em;
    vertical-align: -.2em;
  }
}
</style>
